<template>
  <div class="step_02">
    <div id="container"></div>
  </div>
</template>
<script>
import { Graph } from "@antv/x6";
// 这个库可以插入导入的html
import {insertCss} from 'insert-css'

insertCss(
  `
    .htmlEle {
      color: aqua;
      width:100px;
      height:100px;
      text-align:center;
      line-height:100px;
      border:1px solid red;
    }
  `
)
export default {
  name: "step_02",
  data() {
    return {
      graph: null,
      data: {
        nodes: [
          {
            id: "node1",
            shape: "rect",
            x: 100,
            y: 100,
            width: 100,
            height: 50,
            // label: "矩形",
            attrs: {
              label: {
                text: "矩形"
              }
            }
          },
          {
            id: "node2",
            shape: "circle",
            x: 300,
            y: 100,
            width: 100,
            height: 50,
            label: "world",
          },
          {
            id: "node3",
            shape: "ellipse",
            x: 500,
            y: 100,
            width: 100,
            height: 50,
            label: "world",
          },
          {
            id: "node4",
            shape: "polygon",
            x: 700,
            y: 100,
            width: 100,
            height: 50,
            label: "world",
            attrs: {
              body: {
                fill: '#efdbff',
                stroke: '#9254de',
                // 指定 refPoints 属性，多边形顶点随图形大小自动缩放
                // https://x6.antv.vision/zh/docs/api/registry/attr#refpointsresetoffset
                refPoints: '0,10 10,0 20,10 10,20',
              },
            },
          },
          {
            id: "node5",
            shape: "polyline",
            x: 900,
            y: 100,
            width: 100,
            height: 50,
            label: "world",
            attrs: {
              body: {
                fill: '#efdbff',
                stroke: '#9254de',
                // 指定 refPoints 属性，多边形顶点随图形大小自动缩放
                // https://x6.antv.vision/zh/docs/api/registry/attr#refpointsresetoffset
                refPoints: '0,0 0,10 10,10 10,0',
              },
            },
          },
          {
            id: "node6",
            shape: "path",
            x: 900,
            y: 300,
            width: 100,
            height: 50,
            label: "world",
            path:
              'M24.85,10.126c2.018-4.783,6.628-8.125,11.99-8.125c7.223,0,12.425,6.179,13.079,13.543c0,0,0.353,1.828-0.424,5.119c-1.058,4.482-3.545,8.464-6.898,11.503L24.85,48L7.402,32.165c-3.353-3.038-5.84-7.021-6.898-11.503c-0.777-3.291-0.424-5.119-0.424-5.119C0.734,8.179,5.936,2,13.159,2C18.522,2,22.832,5.343,24.85,10.126z',
            attrs: {
              body: {
                fill: '#D75A4A',
                stroke: 'none',
              },
            },
          },
          {
            id: "node7",
            shape: "image",
            x: 700,
            y: 300,
            width: 100,
            height: 50,
            imageUrl:
              'https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg',
          },
          {
            id: "node8",
            shape: "text-block",
            x: 200,
            y: 260,
            width: 360,
            height: 120,
            text: `There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.`,
            attrs: {
              body: {
                fill: '#efdbff',
                stroke: '#9254de',
                rx: 4,
                ry: 4,
              },
            },
          },
          {
            id: "node9",
            shape: "image-bordered",
            x: 10,
            y: 300,
            width: 100,
            height: 50,
            imageUrl:
              'https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg',
          },
          {
            id: "node10",
            shape: "image-embedded",
            x: 10,
            y: 500,
            width: 100,
            height: 50,
            imageUrl:
              'https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg',
          },
          {
            id: "node11",
            shape: "image-inscribed",
            x: 200,
            y: 500,
            width: 100,
            height: 50,
            imageUrl:
              'https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg',
          },
          {
            id: "node12",
            shape: "cylinder",
            x: 400,
            y: 500,
            width: 100,
            height: 100,
            attrs: {
              top: {
                fill: '#fe854f',
                fillOpacity: 0.5,
              },
              body: {
                fill: '#ED8A19',
                fillOpacity: 0.8,
              },
            },
          },
          {
            id: "node13",
            shape: "html",
            x: 600,
            y: 500,
            width: 100,
            height: 100,
            html() {
              const div = document.createElement('div')
              // div.innerText = '我是div'
              // div.style.background = 'pink'
              div.innerHTML = ` <div class="htmlEle">111</div>`
              return div;
              // return `
              //   <div class="htmlEle">111</div>
              // `
            }
          },
        ],
        edges: [
          {
            shape: "double-edge",
            source: "node1",
            target: "node2",
          },
          {
            shape: "shadow-edge",
            source: "node2",
            target: "node3",
          },
          {
            source: "node3",
            target: "node4",
          },
          {
            source: "node4",
            target: "node5",
          },
          {
            source: "node5",
            target: "node6",
          },
          {
            source: "node6",
            target: "node7",
          },
          {
            source: "node7",
            target: "node8",
          },
          {
            source: "node8",
            target: "node9",
          },
          {
            source: "node9",
            target: "node10",
          },
          {
            source: "node10",
            target: "node11",
          },
          {
            source: "node11",
            target: "node12",
          },
          {
            source: "node12",
            target: "node13",
          },
        ],
      },
    };
  },
  methods: {

  },
  mounted() {
    this.graph = new Graph({
      container: document.querySelector("#container"),
      width: 2000,
      height: 1000,
      grid: true,
    });
    this.graph.fromJSON(this.data);
  },
};
</script>
<style scoped>
</style>